import Taro from '@tarojs/taro';
import request from '@/utils/request';
import drawQrcode from '@/utils/weapp.qrcode.esm.js';
import LoadingPage from '@/components/loading-page';
import { View, Image } from '@tarojs/components';
import { useCallback, useEffect, useRef, useState } from 'react';
import { ArrowLeft } from '@nutui/icons-react-taro';
import { Empty, NavBar, Swiper } from '@nutui/nutui-react-taro';
import { useSelector } from 'react-redux';
import { EnumOrderStatus, IOrderTotal } from '@/types/order';
import {
  EnumCrowd,
  EnumTicketStatus,
  EnumTicketType,
  ITicket,
} from '@/types/ticket';
import { getCurrentDate, isToday } from '@/utils/time';
// import { io } from 'weapp.socket.io';
import { domain, domain2, EnumUserStatus } from '@/constant';
import { getUser } from '@/utils/user';
import './index.less';
import { IUser } from '@/types/user';

const drawQrCode = (canvasId: string, text: string, proportion: number) => {
  drawQrcode({
    width: 150 * proportion,
    height: 150 * proportion,
    canvasId,
    text,
  });
};

const handleOrderToTickets = (orderTotalList: IOrderTotal[]) => {
  const today = getCurrentDate();
  // 获取可使用的门票
  const allOrders = orderTotalList.flatMap((orderTotal) => {
    return orderTotal.children
      .filter((order) => order.status === EnumOrderStatus.PAID)
      .map((order) => ({
        ...order,
        _totalOrderId: orderTotal.id,
      }));
  });

  const tickets: ITicket[] = allOrders
    .filter((order) => order.commodity.attribute.type === EnumTicketType.TICKET)
    .map((order) => {
      return {
        attribute: order.commodity.attribute,
        date: order.commodity.date as string,
        id: order.commodity.id,
        name: order.commodity.name,
        stock: order.commodity.stock,
        price: order.commodity.price,
        status: order.commodity.status,
        _userId: order.user.id,
        _orderId: order.id,
        _status:
          getCurrentDate(order.commodity.date) < today
            ? EnumTicketStatus.EXPIRED
            : EnumTicketStatus.CANUSED,
      };
    });

  const grasses: ITicket[] = [];
  allOrders
    .filter((order) => order.commodity.attribute.type === EnumTicketType.GRASS)
    .forEach((grassOrder) => {
      const pushedGrass = grasses.find(
        (grass: any) => grass.date === grassOrder.commodity.date
      );
      if (pushedGrass) {
        pushedGrass._orderCount && pushedGrass._orderCount++;
      } else {
        grasses.push({
          attribute: grassOrder.commodity.attribute,
          date: grassOrder.commodity.date as string,
          id: grassOrder.commodity.id,
          name: grassOrder.commodity.name,
          stock: grassOrder.commodity.stock,
          price: grassOrder.commodity.price,
          status: grassOrder.commodity.status,
          _orderCount: 1,
          _orderId: grassOrder._totalOrderId,
          _userId: grassOrder.user.id,
          _status:
            getCurrentDate(grassOrder.commodity.date) < today
              ? EnumTicketStatus.EXPIRED
              : EnumTicketStatus.CANUSED,
        });
      }
    });
  return [...tickets, ...grasses]
    .sort((a) => {
      if (a.attribute?.crowd === EnumCrowd.ADULT) return -1;
      if (a.attribute?.crowd === EnumCrowd.CHILD) return 0;
      if (a.attribute?.type === EnumTicketType.GRASS) return 1;
      return 0;
    })
    .sort(
      (a, b) =>
        new Date(a.date as string).getTime() -
        new Date(b.date as string).getTime()
    );
};

// proportion用于适配不同分辨率的机型
// const makeQrCodeByTickets = (tickets: ITicket[], proportion: number) => {
//   tickets.forEach((ticket) => {
//     if (ticket.attribute.type === EnumTicketType.GRASS) {
//       drawQrCode(
//         ticket._orderId,
//         `grass-${ticket._userId}-${ticket._orderCount}`,
//         proportion
//       );
//     } else {
//       drawQrCode(ticket._orderId, `ticket-${ticket._orderId}`, proportion);
//     }
//   });
// };

export default function Index() {
  const barHeight = useSelector((state: any) => state.system.barHeight);
  // const firstRender = useRef(true);
  // const [loading, setLoading] = useState<boolean>(true);
  // const [tickets, setTickets] = useState<ITicket[]>([]);
  // const [swiperValue, setSwiperValue] = useState<number>(0);

  // const systemInfo = Taro.getSystemInfoSync();
  // const proportion = systemInfo.screenWidth / 375;

  const [user, setUser] = useState<IUser | null>(null);

  useEffect(() => {
    const user = getUser();
    if (!user?.id) {
      Taro.redirectTo({ url: '/pages/login/index' });
      return;
    }
    setUser(user);
    // requestForOrders(user.id);
  }, []);

  // const requestForOrders = useCallback(async (userId: string) => {
  //   const orderTotals = await request
  //     .get<IOrderTotal[]>('/order', {
  //       userId: userId,
  //     })
  //     .catch(() => {
  //       return [];
  //     });
  //   const tickets = handleOrderToTickets(orderTotals);
  //   setTickets(tickets);
  // }, []);

  // const onSwiperChange = (event: any) => {
  //   setSwiperValue(event.detail.current);
  // };

  // useEffect(() => {
  //   if (!firstRender.current) {
  //     makeQrCodeByTickets(tickets, proportion);
  //     setLoading(false);
  //   }
  //   firstRender.current = false;
  // }, [tickets]);

  // useEffect(() => {
  //   const socket = io(`${domain}/pos`);
  //   Taro.connectSocket({
  //     url: `${domain}/pos/socket.io`,
  //     success: function () {
  //       console.log('connect success');
  //     },
  //   }).then((task) => {
  //     task.onOpen(function () {
  //       console.log('onOpen');
  //     });
  //     task.onMessage(function (msg) {
  //       console.log('onMessage: ', msg);
  //     });
  //     task.onError(function (err) {
  //       console.log(
  //         '%c [ err ]-127',
  //         'font-size:13px; background:#5c0a33; color:#a04e77;',
  //         err
  //       );
  //       console.log('onError');
  //     });
  //     task.onClose(function (e) {
  //       console.log('onClose: ', e);
  //     });
  //   });
  // }, []);

  return (
    <View className="ticket-use">
      {/* <LoadingPage loading={loading} /> */}
      <View style={{ height: `${barHeight + 60}px`, width: '100%' }}></View>
      <NavBar
        style={{ position: 'fixed', top: `${barHeight}px` }}
        back={<ArrowLeft size={18} />}
        onBackClick={() => Taro.navigateBack()}
      />
      <View className="background" />
      <View className="ticket-container">
        <Image
          className="ticket-background"
          src={`${domain2}/images/logovisot.png`}
        />
        {/* <View className="ticket-info">
          {tickets[swiperValue]?.name}
          {tickets[swiperValue]?._orderCount &&
            ` x ${tickets[swiperValue]?._orderCount}`}
        </View> */}
        {/* {!!tickets.length && (
          <View className="swiper-wapper">
            <Swiper defaultValue={0} indicator onChange={onSwiperChange}>
              {tickets.map((item) => (
                <Swiper.Item key={item.id}>
                  <View className="qrcode-box">
                    {isToday(new Date(item.date)) && (
                      <canvas
                        style={{
                          width: 150 * proportion,
                          height: 150 * proportion,
                          zIndex: 0,
                        }}
                        canvas-id={item._orderId}
                      />
                    )}
                    {!isToday(new Date(item.date)) && (
                      <>
                        <View className="qr-code-fake">
                          <Image
                            style={{
                              width: 150 * proportion,
                              height: 150 * proportion,
                            }}
                            src={`${domain}/images/qr-code-fake.png`}
                          />
                        </View>
                        <View className="not-in-time">
                          <View>不在使用日期</View>
                        </View>
                      </>
                    )}
                  </View>
                </Swiper.Item>
              ))}
            </Swiper>
          </View>
        )} */}
        {/* {!tickets.length && (
          <View className="empty-box">
            <Empty
              image={<img src={`${domain}/images/empty.png`} alt="" />}
              size="small"
              description="未成为会员"
            />
          </View>
        )} */}
        {user?.status === EnumUserStatus.VIP ? (
          <View className="empty-box">
            <Empty
              image={<img src={`${domain2}/images/VIPQRCode0213.png`} alt="" />}
              size="base"
              description="尊贵的会员，请加群"
            />
          </View>
        ) : (
          <View className="empty-box">
            <Empty
              image={
                <img
                  src={`${domain2}/images/wxqrcode20250221103150.jpg`}
                  alt=""
                />
              }
              size="base"
              description="未成为会员"
            />
          </View>
        )}
      </View>
      <View className="notice">
        <View className="title">
          <View className="icon" />
          注意事项
        </View>
        <View className="content primary">
          欢迎加入AI创业交流群！本群旨在为AI领域的创业者、从业者及爱好者提供一个开放、友好、高效的交流平台。为了确保群内氛围和谐、讨论有价值，请所有成员共同遵守以下规则：
        </View>
        <View className="content">
          1.本群专注于AI技术、创业经验、行业趋势等话题，请围绕相关主题展开讨论。
        </View>
        <View className="content">
          2.未经管理员允许，不得发布任何形式的广告、推广信息或外部链接。
        </View>
        <View className="content">
          3.避免连续发送无关内容或重复信息，保持群内讨论有序。
        </View>
        <View className="content">
          4.鼓励分享原创内容、经验总结或行业洞察，注明来源。
        </View>
        <View className="content">
          5.多次违规或情节严重者将被移出群聊，且不再接受重新加入申请。
        </View>
      </View>
    </View>
  );
}
